<template>
	<view>
		<view class="group-box"
			:style="{height:initListPosition[0].height * listArray.length +initListPosition[0].fheight+ 'px'}">
			<view class="item">
				<view class="left">
					<view class="checkRed-box" @click.stop="switchSelectAll">
						<image v-if="isSelectAll" class="img-full" src="@/static/price/check_red.png">
						</image>
						<view class="checkRed" v-else>
						</view>
					</view>
					<view class="text">
						<view class="sub">全选</view>
					</view>
				</view>
				<view class="right">
					<text>置顶</text>
					<text>排序</text>
				</view>
			</view>
			<view class="item" v-for="(item,index) in listArray" :key="index" :style="{
				'top': (index+1)*128 + 'px',
				'transition': curretnItemIndex === index ? 'initial' : '.3s'}" :class="{'activeClass':index == curretnItemIndex}">
				<view class="left">
					<view class="checkRed-box" @click.stop="switchSelect(item)">
						<image v-if="checkList.includes(item.I)" class="img-full" src="@/static/price/check_red.png">
						</image>
						<view class="checkRed" v-else>
							1
						</view>
					</view>
					<view class="text">
						<view class="sup">{{item.N}}</view>
						<view class="sub">{{item.I}}</view>
					</view>
				</view>
				<view class="right">
					<view class="icon-box">
						<image class="img-full" src="@/static/price/subprice/top.png" @click="topping(item)"></image>
					</view>
					<view class="icon-box">
						<image class="img-full" v-if="item.sort !== 0" @touchstart="onTouchstart($event, index)"
							@touchmove="onTouchmove" @touchend="onTouchend" src="@/static/price/subprice/sort.png">
						</image>
					</view>

				</view>
			</view>
		</view>
		<view class="info-text">
			<text>
				当前期货通暂不支持展示股票基金等行情，
				若分组中全部都是此类标的，将会自动隐藏该分组 (非删除)
			</text>
		</view>
		<view :style="'height:calc(124rpx - '+botOperateBut+'px)'"></view>
		<view class="bottom-fit">
			<view class="bottom-btn" :style="{'padding-bottom':botOperateBut+'px'}">
				<view class="btns" @click="clickDel">删除({{selectNum}})</view>
				<!-- <view class="btns" @click="addispacket">添加到分组</view> -->
			</view>
		</view>
		<!-- 添加到分组 -->
		<view class="packet-modal" @touchmove.stop.prevent>
			<view class="shade" :hidden="!ispacket"></view>
			<view class="packet-box" :animation="animationData">
				<view class="caption">
					<text>添加到分组</text>
					<image @click="closeispacket" src="@/static/home/subpage/close.png"></image>
				</view>
				<view class="item-box">
					<view class="item" v-for="(item,index) in 2">
						<view class="left">
							<image src="@/static/price/check_no.png"></image>
							<view class="text">默认（6）</view>
						</view>
					</view>
					<view class="bottom-btn">
						<view class="btns" @click="addGroup">新建分组</view>
						<view class="btns" @click="complete">完成</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 新建分组 -->
		<view class="add-group-modal" @touchmove.stop.prevent :hidden="!isaddGroup">
			<view class="shade"></view>
			<view class="add-group-box">
				<view class="caption">新建分组</view>
				<view class="info-box">
					<textarea v-model="textareaValue" class="ipt" placeholder-class="pipt" />
					<view class="num">{{textareaValue.length}}/12</view>
				</view>
				<view class="bottom-btn">
					<view class="btns" @click="isaddGroup=false">取消</view>
					<view class="btns" @click="affirm">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				botOperateBut: 0,
				animationData: {},
				animation: {},
				isSelectAll: false,
				selectNum: 0,
				list: [],
				listArray: [],
				// 所有元素定位位置
				listPosition: [],
				// 记录拖动前元素定位位置
				initListPosition: [{
					height: 128,
					fheight: 100
				}],
				// 记录当前拖动元素的下标
				curretnItemIndex: -1,
				// 当前拖拽的元素
				curretnItem: {},
				// 记录拖动前的位置
				recordPosition: {
					y: 0
				},
				// 记录拖动前的定位位置
				recordCurrentPositionItem: {
					top: 0
				},
				// 是否正在交换位置
				isChange: false,
				ispacket: false,
				isaddGroup: false,
				// 置顶数据的数量
				toppingNum: 0,
				isrequrst: false,
				textareaValue: '',
				
				checkList:[]
			};
		},
		onLoad(options) {
			// this.getOptional()
			// this.init();
			// this.listArray = [...this.list];

			let data = (uni.getStorageSync('ISS') && JSON.parse(uni.getStorageSync(
				'ISS'))) || [];

			this.listArray = data;
		},
		onReady() {
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: 'ease',
			})
			this.animation = animation;
		},
		methods: {
			getOptional() {
				this.isrequrst = true
				uni.showLoading({
					title: "加载中..."
				})
				this.$request({
					url: this.$api.contractList,
					method: 'get',
					data: {
						pageSize: 9999,
						pageNum: 1,
					},
					successCb: (res) => {
						// console.log('请求成功', res)
						// 置顶数据的数量
						let toppingNum = 0
						this.list = res.data.map(item => {
							if (item.sort === 0) {
								toppingNum += 1
							}
							return {
								...item,
								isSelect: false,
								isRise: (item.ratio.indexOf('-') == -1)
							}
						})
						// console.log(this.list)
						this.listArray = this.list
						this.toppingNum = toppingNum
						if (this.list.length) {
							this.init();
						}
					},
					failCb(e) {
						this.isrequrst = false
						// uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 初始化拖动排序功能
			init() {
				this.isrequrst = true
				uni.showLoading({
					title: "加载中..."
				})
				this.listPosition = []
				this.initListPosition = [{
						height: 0,
						fheight: 0
					}],
					this.curretnItemIndex = -1,
					this.curretnItem = {}
				this.recordPosition = {
					y: 0
				}
				this.recordCurrentPositionItem = {
					top: 0
				}
				var dw = uni.getSystemInfoSync().windowWidth;
				var hw = uni.getSystemInfoSync().windowHeight;
				var scale = dw / 750;
				this.list.forEach((item, index) => {
					this.listPosition.push({
						height: scale * 128,
						fheight: scale * 106,
						top: scale * 128 * index + scale * 106,
					});
				});
				if (this.listPosition.length) {
					this.initListPosition = [...this.listPosition]
				}
				this.isrequrst = false
				uni.hideLoading();
			},

			switchSelect(item) {
				this.checkList.push(item.I)
				// item.isSelect = !item.isSelect
				// let res = 0
				// this.listArray.forEach((item, i) => {
				// 	if (item.isSelect) {
				// 		res += 1
				// 	}
				// })
				// this.selectNum = res
				// this.isSelectAll = res === this.listArray.length
			},
			switchSelectAll() {
				this.isSelectAll = !this.isSelectAll
				this.listArray.forEach((item, i) => {
					item.isSelect = this.isSelectAll
				})
				if (this.isSelectAll) {
					this.selectNum = this.listArray.length
				} else {
					this.selectNum = 0
				}
			},
			// 删除合约
			clickDel() {
				uni.showModal({
					title: '提示',
					content: '确定要删除自选合约吗？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							this.delOptional()
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			// 删除自选数据
			delOptional() {
				let arr = []
				this.listArray.map(item => {
					if (item.isSelect) {
						arr.push(item.id)
					}
				})
				if (!arr.length) {
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				this.isrequrst = true
				this.$request({
					url: this.$api.contractDelete,
					data: {
						ids: arr.join(','),
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res)
						this.getOptional()
						uni.showToast({
							title: res.msg || '操作成功',
							icon: "none",
							duration: 2000,
						});
					},
					failCb(e) {
						this.isrequrst = false
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 置顶
			topping(item) {
				if (item.sort === 0) {
					this.cancellationTopping(item)
					return
				}
				uni.showLoading({
					title: "加载中..."
				})
				this.isrequrst = true
				this.$request({
					url: this.$api.contractListTop,
					data: {
						id: item.id,
					},
					successCb: (res) => {
						uni.hideLoading();
						// console.log('请求成功', res)
						this.getOptional()
						uni.showToast({
							title: res.msg || '操作成功',
							icon: "none",
							duration: 2000,
						});
					},
					failCb(e) {
						this.isrequrst = false
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			// 取消置顶
			cancellationTopping(item) {
				uni.showLoading({
					title: "加载中..."
				})
				let data = {
					...item,
					sort: 1
				}
				this.isrequrst = true
				this.$request({
					url: this.$api.contractListSort,
					data: [data],
					successCb: (res) => {
						this.getOptional()
						// uni.showToast({
						// 	title: res.msg || '操作成功',
						// 	icon: "none",
						// 	duration: 2000,
						// });
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},

			onTouchstart(event, index) {
				const {
					pageY
				} = event.touches[0];

				// 记录当前拖动元素的下标
				this.curretnItemIndex = index;
				// 记录拖动前的位置
				this.recordPosition = {
					y: pageY
				};
				// 记录拖动前的定位位置
				this.recordCurrentPositionItem = this.listPosition[index];
			},
			onTouchmove(event) {
				if (this.isrequrst) return
				const {
					pageY
				} = event.touches[0];

				// 获取移动的差
				this.$set(this.listPosition, this.curretnItemIndex, {
					top: this.listPosition[this.curretnItemIndex].top + (pageY - this.recordPosition
						.y),
				});
				// 记录位置
				this.recordPosition = {
					y: pageY
				};
				let temp = this.listArray[this.curretnItemIndex]
				this.curretnItem = temp
				// 向下
				if (this.listPosition[this.curretnItemIndex].top >= this.listPosition[this.curretnItemIndex + 1]?.top -
					this.initListPosition[0].height / 2) {
					if (this.isChange) return
					this.isChange = true
					this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex + 1]
					this.listArray[this.curretnItemIndex + 1] = temp
					this.listPosition[this.curretnItemIndex + 1] = this.listPosition[this.curretnItemIndex]
					this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
					this.curretnItemIndex = this.curretnItemIndex + 1
					this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
					this.isChange = false
				}
				// 向上
				if (this.listPosition[this.curretnItemIndex].top > this.listPosition[this.toppingNum - 1]?.top +
					this.initListPosition[0].height / 2) {
					// console.log('排序低于置顶数据')
					if (this.listPosition[this.curretnItemIndex].top <= this.listPosition[this.curretnItemIndex - 1]?.top +
						this.initListPosition[0].height / 2) {
						if (this.isChange) return
						this.isChange = true
						this.listArray[this.curretnItemIndex] = this.listArray[this.curretnItemIndex - 1]
						this.listArray[this.curretnItemIndex - 1] = temp
						this.listPosition[this.curretnItemIndex - 1] = this.listPosition[this.curretnItemIndex]
						this.listPosition[this.curretnItemIndex] = this.recordCurrentPositionItem
						this.curretnItemIndex = this.curretnItemIndex - 1
						this.recordCurrentPositionItem = this.initListPosition[this.curretnItemIndex]
						this.isChange = false
					}
				}

			},

			onTouchend(event) {
				if (this.isrequrst) return
				// 拖动元素归位
				this.listPosition[this.curretnItemIndex] = this.initListPosition[this
					.curretnItemIndex];
				this.curretnItemIndex = -1;
				this.listArray.map((item, i) => {
					// 除置顶数据重新定义排序
					if (item.sort !== 0) {
						item.sort = i + 1
					}
				})
				uni.showLoading({
					title: "加载中..."
				})
				this.isrequrst = true
				this.$request({
					url: this.$api.contractListSort,
					data: this.listArray,
					successCb: (res) => {
						this.getOptional()
						// uni.showToast({
						// 	title: res.msg || '操作成功',
						// 	icon: "none",
						// 	duration: 2000,
						// });
					},
					failCb(e) {
						uni.hideLoading();
						// console.log(e);
						uni.showToast({
							title: e.data.msg || '服务器异常',
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
			addispacket() {
				this.ispacket = true;
				this.animation.translateY(0).step();
				this.animationData = this.animation.export();
			},
			closeispacket() {
				this.ispacket = false;
				this.animation.translateY("100%").step();
				this.animationData = this.animation.export();
			},
			complete() {
				this.closeispacket();
			},
			addGroup() {
				this.closeispacket();
				this.isaddGroup = true;
			},
			affirm() {
				this.isaddGroup = false;
			},
		}
	}
</script>

<style lang="scss">
	.activeClass {
		box-shadow: 0 0px 50rpx #cfcfcf;
		z-index: 999;
	}

	.group-box {
		border-top: 2rpx solid #F6F7F9;

		.item {
			padding: 28rpx 16rpx 28rpx 24rpx;
			border-bottom: 2rpx solid #F6F7F9;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			width: 100%;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;

				& image {
					width: 64rpx;
					height: 64rpx;
				}

				.text {
					.sup {
						font-size: 32rpx;
						font-weight: bold;
						color: rgba(0, 0, 0, 0.8);
						max-width: 480rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.sub {
						font-size: 20rpx;
						color: rgba(0, 0, 0, 0.4);
					}
				}
			}

			.right {
				display: flex;
				align-items: center;

				.icon-box {
					width: 64rpx;
					height: 64rpx;
					margin-left: 16rpx;
				}

				& text {
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.4);
					padding-left: 32rpx;
				}
			}
		}

		.item:first-child {
			padding: 24rpx 24rpx 18rpx;
			height: 106rpx;
			box-sizing: border-box;

			.left {
				.text {
					.sub {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.checkRed-box {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.checkRed {
			width: 32rpx;
			height: 32rpx;
			border-radius: 50%;
			border: 2rpx solid #666;
		}
	}

	.info-text {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.4);
		line-height: 34rpx;
		margin-top: 28rpx;
		text-align: center;
	}

	.bottom-fit {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		box-shadow: 0px 0 16rpx 2rpx rgba(51, 51, 51, 0.2);
		background-color: #fff;
		z-index: 9;

		.bottom-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btns {
				width: 326rpx;
				height: 88rpx;
				border-radius: 16rpx;
				border: 2rpx solid #F4F5F7;
				text-align: center;
				line-height: 88rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.8);
				box-sizing: border-box;
			}

			.btns:last-child {
				background: #EE5953;
				border: 0;
				color: #fff;
			}
		}
	}

	.packet-modal {
		.packet-box {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
			transform: translateY(100%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0px 0px;
			overflow: hidden;

			.caption {
				height: 114rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				position: relative;
				line-height: 114rpx;
				border-bottom: 2rpx solid #F6F7F9;

				& image {
					width: 96rpx;
					height: 96rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}

			.item-box {
				padding: 0 32rpx 32rpx;

				.item {
					padding: 32rpx 0;
					border-bottom: 2rpx solid #F6F7F9;

					.left {
						display: flex;
						align-items: center;

						& image {
							width: 64rpx;
							height: 64rpx;
						}

						.text {
							font-size: 28rpx;
							color: rgba(0, 0, 0, 0.8);
						}
					}
				}
			}

			.bottom-btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 108rpx;

				.btns {
					width: 326rpx;
					height: 88rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					text-align: center;
					line-height: 88rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					box-sizing: border-box;
				}

				.btns:last-child {
					background: #EE5953;
					border: 0;
					color: #fff;
				}
			}
		}
	}

	.add-group-modal {
		.add-group-box {
			position: fixed;
			left: 50%;
			top: 50%;
			width: 654rpx;
			padding: 48rpx 32rpx 32rpx;
			box-sizing: border-box;
			transform: translate(-50%, -50%);
			z-index: 100;
			background: #FFFFFF;
			border-radius: 16rpx;

			.caption {
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(0, 0, 0, 0.8);
				text-align: center;
			}

			.info-box {
				background: #F4F5F7;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-top: 32rpx;

				.ipt {
					width: 100%;
					height: 286rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.num {
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.6);
					text-align: right;
					margin-top: 8rpx;
				}
			}

			.bottom-btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 48rpx;

				.btns {
					width: 282rpx;
					height: 88rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F4F5F7;
					text-align: center;
					line-height: 88rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.8);
					box-sizing: border-box;
				}

				.btns:last-child {
					background: #EE5953;
					border: 0;
					color: #fff;
				}
			}
		}
	}
</style>